<template>
  <div style="display: flex;">
    <!-- 侧边导航 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item v-for="(item,index) in menuList" :key="index" :title="item.sortName"
        @click="getGoods(item.sortId)" />
    </van-sidebar>
    <!-- 展示区域 -->
    <div style="width: 80%;">
      <van-grid :column-num="3" :gutter="0" :border="false">
        <van-grid-item v-for="(item,index) in goodsList" :key="index" :icon="baseUrl+item.image" :text="item.goodsName"
          @click="toDetails(item.id)" style="height:100px" icon-size="100px" />
      </van-grid>
    </div>
    <xFooter />
  </div>
</template> 
<script>
import { listSort } from "@/api/goods/sort"
import { selectBySort } from "@/api/goods/goods"
export default {
  data () {
    return {
      activeKey: 0,
      menuList: [],
      goodsList: [],
      menuUrl: [],
    }
  },
  mounted () {
    this.getData()
    this.getGoods(1)
  },
  methods: {
    getData () {
      listSort().then(res => {
        this.menuList = res.rows
      })
    },
    getGoods (id) {
      const data = { sortId: id }
      selectBySort(data).then(res => {
        this.goodsList = res.rows
      })
    },
    toDetails (id) {
      this.$router.push({ name: "details", params: { id: id } })
    }
  }
}
</script>